import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import styles from './Layout.less';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  Avatar,
  message,
  Badge,
  Radio,
  Upload,
  Icon,
  Popover,
} from 'antd';

@Form.create()
export default class ParentLayout extends PureComponent {
  constructor(props) {
    super(props);
   
    this.state = {
      fileList: [],
      file: null,
    };
  }

  componentWillReceiveProps(nextProps) {
  }

  render() {
    const { item, total } = this.props;
    const content = (
      <div className={styles.buttonContainer}>
        <button onClick={() => this.props.editLayout(item)}>编辑</button>
        <button disabled={item.weight == this.props.first ? true : false} onClick={() => this.props.forwardLayout(item)}>前移</button>
        <button disabled={item.weight == this.props.last ? true : false} onClick={() => this.props.backLayout(item)}>后移</button>
        <button onClick={() => this.props.addLayout(item)}>添加布局</button>
        <button onClick={() => this.props.deleteLayout(item)}>删除</button>
      </div>
    )
    return (
      <div>
        {
          item.layoutStyle == "0" ?
            <Popover content={content}>
              <div className={styles.parentContainer} key={item.layoutId}>
                <div className={styles.parentItem}>
                  <img src={require('../../assets/parentRecomm/pic0.png')} className={styles.parentImg} />
                </div>
              </div>
            </Popover>

            :
            item.layoutStyle == "1" ?
              <Popover content={content}>
                <div className={styles.parentContainer} key={item.layoutId}>
                  <div className={styles.parentItem}>
                    <img src={require('../../assets/parentRecomm/pic1.png')} className={styles.parentImg} />
                  </div>
                </div>
              </Popover>

              :
              item.layoutStyle == "2" ?
              <Popover content={content}>
              <div className={styles.parentContainer} key={item.layoutId}>
                <div className={styles.parentItem}>
                  <img src={require('../../assets/parentRecomm/pic2.png')} className={styles.parentImg} />
                </div>
              </div>
            </Popover>
                :
                null
        }

      </div>

    )
  }
}